import 'package:flutter/material.dart';
import 'package:flutter_vant_ui/flutter_vant_ui.dart';

import '../../demos/demos.dart';

class VanDocDemoSpaceSection extends StatefulWidget {
  const VanDocDemoSpaceSection({super.key});

  @override
  State<VanDocDemoSpaceSection> createState() => _VanDocDemoSpaceSectionState();
}

class _VanDocDemoSpaceSectionState extends State<VanDocDemoSpaceSection> {
  String _align = "center";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Space")),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.only(left: 16, right: 16, bottom: 40),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              const VanDocDemoBlockTitle(title: "基础用法", paddingTop: 20, paddingLeft: 0),
              VanSpace(
                children: List.generate(4, (index) => const VanButton(text: "按钮", type: VanButtonType.primary)),
              ),
              const VanDocDemoBlockTitle(title: "垂直排列", paddingLeft: 0),
              VanSpace(
                direction: VanSpaceDirection.vertical,
                fill: true,
                children: List.generate(
                  3,
                  (index) => const VanButton(
                    text: "按钮",
                    type: VanButtonType.primary,
                    block: true,
                  ),
                ),
              ),
              const VanDocDemoBlockTitle(title: "自定义间距", paddingLeft: 0),
              VanSpace(
                size: 20,
                children: List.generate(3, (index) => const VanButton(text: "按钮", type: VanButtonType.primary)),
              ),
              // // 通过调整 align 的值来设置子元素的对齐方式, 可选值为 start, center ,end ,baseline，在水平模式下的默认值为 center。
              const VanDocDemoBlockTitle(title: "对齐方式", paddingLeft: 0),
              Builder(builder: (context) {
                final controller = VanRadioGroupController<VanSpaceAlign>(VanSpaceAlign.center);
                return Wrap(
                  runSpacing: 16,
                  children: [
                    VanRadioGroup(
                      controller: controller,
                      direction: VanRadioDirection.horizontal,
                      children: const [
                        VanRadio(child: "start", value: VanSpaceAlign.start),
                        VanRadio(child: "center", value: VanSpaceAlign.center),
                        VanRadio(child: "end", value: VanSpaceAlign.end),
                        VanRadio(child: "baseline", value: VanSpaceAlign.baseline),
                      ],
                    ),
                    Container(
                      padding: const EdgeInsets.all(16),
                      color: const Color.fromRGBO(243, 242, 245, 1),
                      child: ValueListenableBuilder(
                          valueListenable: controller,
                          builder: (context, align, child) {
                            return VanSpace(
                              align: align,
                              children: [
                                VanButton(text: align.name, type: VanButtonType.primary),
                                Container(
                                  padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 20),
                                  color: Colors.white,
                                  child: Text(
                                    'Block',
                                    style: TextStyle(
                                      color: kVanTextColor2.toColor(context),
                                      fontSize: 16,
                                    ),
                                  ),
                                ),
                                // VanButton(text: "按钮", type: VanButtonType.primary, block: true),
                                // VanButton(text: "按钮", type: VanButtonType.primary, block: true),
                              ],
                            );
                          }),
                    ),
                  ],
                );
              }),
              // 在水平模式下, 通过 wrap 属性来控制子元素是否自动换行。
              const VanDocDemoBlockTitle(title: "自动换行", paddingLeft: 0),
              VanSpace(
                wrap: true,
                children: List.generate(8, (index) => const VanButton(text: "按钮", type: VanButtonType.primary)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
